<template>
    <div class="myBid">
        <v-title
            :content="'我的竞拍'"
            :font-size="20"
        />
        <el-radio-group v-model="radio1" class="m_radio" @input="inputRadioType">
            <el-radio-button label="1">全部</el-radio-button>
            <el-radio-button label="2">参与中</el-radio-button>
            <el-radio-button label="3">已结束</el-radio-button>
            <el-radio-button label="4">已拍下</el-radio-button>
        </el-radio-group>
        <div class="card">
            <ul class="pai-item-list">
                <li v-for="(val,i) in lotsCardList" :key="i" class="pai-item">
                    <div @click="routeDetail(val)" class="link_wrap">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                            <el-image :src="imgurls+ val.images" alt="" class="lot_pic"></el-image>
                        </div>
                        
                        <div class="item_content">
                            <div class="item_title">
                            <span>{{val.name}}</span>
                            </div>
                            <div class="item_money">
                            <p>
                                <span v-if="val.state=='1'||val.state=='4'||val.state=='5'">起拍价</span>
                                <span v-if="val.state=='2'||val.state=='6'||val.state=='7'">当前价</span>
                                <span v-if="val.state=='3'">成交价</span>

                                <span v-if="val.state=='2'||val.state=='3'||val.state=='5'||val.state=='6'||val.state=='7'" class="red moneyBig">
                                    {{val.prices | formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='4'" class="gray moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='1'" class="green moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                
                            </p>
                            <div v-if="val.state=='1'" class="item_money_time">
                                <p>预计{{val.time}}开始</p>
                                <p class="greenBtn">即将开始</p>
                            </div>
                            <div v-if="val.state=='2'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">正在进行</p>
                            </div>
                            <div v-if="val.state=='3'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已成交</p>
                            </div>
                            <div v-if="val.state=='4'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="grayBtn">已流拍</p>
                            </div>
                            <div v-if="val.state=='5'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已撤拍</p>
                            </div>
                            <div v-if="val.state=='6'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">等待拍卖师</p>
                            </div>
                            </div>  
                            <div class="item_bottom clearfix">
                                <div>
                                <span>{{val.viewcount}}次围观</span>
                                </div>
                                <!-- <el-divider direction="vertical"></el-divider> -->
                                <div>
                                <span>{{val.history_count}}次出价</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import vTitle from '@/components/title/a-tip.vue'
import {myAuction} from '@/api/user'
import {getUserInfoID,timestampToTime} from '@/utils/auth'
export default{
    components:{
        vTitle
    },
    data(){
        return{
            uid:'',
            radio1:'1',
            lotsCardList:[]
        }
    },
    created(){
         //获取当前是 企业2 还是 个人1
         var userInfo = getUserInfoID();
        if(userInfo){
            var info = JSON.parse(userInfo);
            this.uid = info.id;
        }
        this.getList({id:this.uid,type:'1'});
    },
    filters: {
        formatNumber(value) {
            if (value >= 10000) {
            return (value / 10000).toFixed(2) + '万';
            }
            return value;
        }
    },
    methods:{
       getList(obj){
        myAuction(obj).then(res => {
            if(res.code == 200){
                res.data.forEach(item => {
                    item.images = item.images.split(',')[0];
                    item.time = this.timestampToTime(item.time);
                });
                this.lotsCardList = res.data;
            }
        });
       },
       inputRadioType(label){
        this.getList({id:this.uid,type:label});
       },
       // 点击标的跳转到标的详情
       routeDetail(val){
            this.$router.push({path:'/lots/detail',query: {lotsId:val.id,auctionid:val.auction_id}})
        },
        //将时间戳转换成日期格式
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            // var Y = date.getFullYear() + '年';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
            var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + '日';
            var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes());
            // return Y+M+D+h+m+s;
            return M+D+h+m;
        }, 
    }

}
</script>

<style lang="less" scoped>

.myBid{
    min-height: 100vh;
    /deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
        color: #FFF;
        background-color: #e03e2d;
        border-color: #e03e2d;
        box-shadow: -1px 0 0 0 #e03e2d;
    }
    /deep/.el-radio-button:hover{
        .el-radio-button__inner{
            // color: #e03e2d;
             background-color: #e03e2d;
            color: #fff;
        }
       
    }
    .m_radio{
        margin: 20px 0px;
    }


    .pai-item-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,278px);
            grid-gap: 20px;
            .link_wrap{
                position: relative;
                display: inline-block;
                width: 280px;
                height: 355px;
                text-decoration: none;
                .item_card{
                    .image {
                        height: 190px;
                        .lot_pic{
                            vertical-align: top;
                            width: 100%;
                            max-height: 100%;
                            border: 0;
                        }
                    }
                    .item_content{
                        padding-left: 12px;
                        padding-right: 12px;
                        padding-top: 8px;           
                        .item_title{
                            height: 56px;
                            font-size: 18px;
                        }
                        .item_money{
                            font-size: 14px;
                            color: rgb(153, 153, 153);
                            .item_money_time{
                                p{
                                    display: inline-block;  
                                }
                                
                                p:last-of-type{
                                    font-size: 12px;
                                    font-weight: 400;
                                    position: absolute;
                                    right: 0px;
                                    padding: 2px 8px 2px 12px;
                                    height: 20px;
                                    line-height: 20px;
                                    text-align: center;
                                    border-radius: 12px 0px 0px 12px;
                                    color: #fff;
                                }
                            }
                        }
                        .item_money{
                            p{
                                margin-bottom: 10px;
                            }
                        }
                        .item_bottom{
                            height: 40px;
                            font-size: 12px;
                            line-height: 40px;
                            border-top: 1px solid rgb(237, 237, 237);
                            display: flex;
                            justify-content: space-between;
                            color: rgb(153, 153, 153);
                        }
                    }
                }
                .item_card:hover{
                    border: 1px solid #cc0000;
                }
                
            }
            .moneyBig{
                font-size: 18px;
                font-weight: 400;
                margin-left: 4px;
                margin-top: 4px;
            }

        }


}


</style>